<template>
	<div>
		<div class="container">
			<Loading v-if="loading"></Loading>
			<div class="listItem" v-for="item,index in list" :key="index">
				<div class="header">
					<div class="left">
						<span>{{item.createTime}}</span>
						<span>Zxh</span>
						<span>订单号：{{item.orderNo}}</span>
						<span>{{item.paymentTypeDesc}}</span>
					</div>
					<div class="right">
						<span>应付金额:</span>
						<span>{{item.payment}}</span>
						<span>元</span>
					</div>
				</div>
				<div class="footer">
					<div class="left">
						<div v-for="item1,index1 in item.orderItemVoList" :key="index1" class="item">
							<img v-lazy="item1.productImage" alt="">
							<div class="desc">
								<p>{{item1.productName}}</p>
								<p>{{item1.totalPrice+'X'+item1.quantity}}元</p>
							</div>
						</div>
					</div>
					<div class="right">
						<span @click="goPay(item.orderNo)" v-if="item.status==10">{{item.statusDesc}}</span>
						<span @click="goPay(item.orderNo)" v-else>{{item.statusDesc}}</span>
					</div>
				</div>
			</div>
			<Nodata v-if="!loading&&list.length==0"></Nodata>
			<el-pagination  :style="{textAlign:'center',margin:'30px'}"
			  background
			  layout="prev, pager, next"
				:pageSize="pageSize"
			  :total="total"
				@current-change="handleChange">
			</el-pagination>
			<!-- 一下是其他分页方式 -->
			<!-- 点击按钮加载更多 -->
			<div v-if="false" :style="{textAlign:'center'}">
				<el-button type="primary" :loading="loading" 
				:style="{textAlign:'center',margin:'30px'}" @click="loadMore">加载更多</el-button>
			</div>
			<!-- 滚动加载更多 -->
			<div v-if="false" class="scroll-more" v-infinite-scroll="scrollMore" infinite-scroll-disable="busy"
			infinite-scroll-distance="400" :style="{textAlign:'center'}">
				<img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
			</div>
		</div>
	</div>
</template>

<script>
	import Loading from '../components/Loading.vue'
	import Nodata from '../components/NoData.vue'
	import {Pagination,Button} from 'element-ui'
	import InfiniteScroll from 'vue-infinite-scroll'
	export default{
		components:{
			Loading,
			Nodata,
			[Pagination.name]:Pagination,
			[Button.name]:Button,
		},
		directives:{
			InfiniteScroll
		},
		data(){
			return{
				list:[],
				loading:false,
				pageSize:1,
				pageNum:5,
				total:0,
				busy:false,//是否触发滚动加载
			}
		},
		mounted() {
			this.getOrderList()
		},
		methods:{
			//滚动加载 通过插件实现
			scrollMore(){
				this.busy=true;
				setTimeout(()=>{
					this.pageNum++;
					this.getList()
				},500)
			},
			//专门给Scroll使用
			getList(){
				this.loading=false
				this.axios.get('/orders',{
					params:{
						pageSize:this.pageSize,
						pageNum:this.pageNum
					}
				}).then(res=>{
					if(res.hasNextPage){
						this.loading=true
						this.busy=false
					}else{
						this.list = this.list.concat(res.list);
						this.busy=true
					}
				})
			},
			//使用按钮来加载更多
			loadMore(){
				this.pageNum++;
				this.getOrderList()
			},
			//使用elementUI来进行分页
			handleChange(pageNum){
				this.pageNum=pageNum;
				this.getOrderList()
			},
			getOrderList(){
				this.loading=true
				this.axios.get('/orders',{
					params:{
						pageSize:this.pageSize,
						pageNum:this.pageNum
					}
				}).then(res=>{
					this.loading=false
					this.list=res.list
					this.total=res.total
				}).catch(()=>{
					this.loading=false
				})
			},
			goPay(orderNo){
				this.$router.push({
					path:'/order/pay',
					query:{
						orderNo
					}
				})
			}
			
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import './../assets/css/base.less';
	.container{
		.listItem{
			width: 100%;
			height: 230px;
			border: 1px solid #E5E5E5;
			.header{
				display: flex;
				justify-content: space-between;
				padding: 30px 40px;
				font-size: 16px;
				.left{
					
					span:nth-child(-n+3){
						&::after{
							content: '|';
							padding: 0 8px;
							display: inline-block;
						}
					}
				}
				.right{
					span:nth-child(2){
						font-size: 25px;
						font-weight: 600;
						margin-left: 15px;
					}
				}
			}
			.footer{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px 40px 30px 50px;
				font-size: 25px;
				.item{
					display: inline-block;
				}
				.desc{
					display: inline-block;
					margin-left: 15px;
					height: 50px;
					line-height: 25px;
				}
				img{
					width: 70px;
					height: 100px;
					vertical-align: middle;
				}
				.right{
					color: #FF6600;
					span{
						cursor: pointer;
					}
				}
			}
		}
	}
</style>
